<template>
  <div class="abnormal-order">
    <main-content
      title="服务单详情"
      back
    >
      <section
        v-if="orderData.exception?.status !== 'reject'"
        class="steps-line"
      >
        <simple-steps
          :active-index="activeStepIndex"
          :steps="steps"
        />
      </section>

      <section class="status-line">
        <div class="left">
          <div class="status">
            <div class="status-main">
              <div class="icon">
                <el-icon><Warning /></el-icon>
              </div>
              当前订单状态：
              <span style="font-size: 22px; font-weight: bold">{{ currentOrderStatus?.title }}</span>
            </div>
            <div
              v-if="orderData.errMsg"
              class="status-sub"
            >
              {{ orderData.errMsg }}
            </div>
          </div>
        </div>
        <div class="right" />
      </section>

      <section class="table-section">
        <div class="table-title">
          <div class="decorator" />
          退货商品
        </div>
        <div class="table-wrapper">
          <el-table
            :data="goodsTableData"
            style="width: 100%"
          >
            <el-table-column
              prop="thumbnailUrl"
              label="商品图片"
              width="120"
            >
              <template #default="scope">
                <div>
                  <el-avatar
                    style="margin-top: 8px;"
                    shape="square"
                    :size="80"
                    fit="fill"
                    :src="scope.row.thumbnailUrl"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="商品名称"
            />
            <el-table-column
              prop="productName"
              label="规格名称"
            />
            <el-table-column
              prop="payOfMoney"
              label="价格"
            >
              <template #default="scope">
                <!-- <div>
                  <span v-show="scope.row.payOfCurrencyCount">{{ `${scope.row.payOfCurrencyCount}（积分），` }}</span>
                  {{ setMoneyConfig(scope.row.payOfMoney) }}
                </div> -->
                {{ getPointsAndMoneyString(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsNum"
              label="数量"
            />
            <el-table-column label="合计">
              <template #default="props">
                <!-- {{ props.row.payOfCurrencyCount }}积分
                +
                {{ isNaN(props.row.payOfMoney) ? props.row.payOfMoney : props.row.payOfMoney / 100 }}元 -->
                {{ getPointsAndMoneyString(props.row) }}
              </template>
            </el-table-column>
          </el-table>
          <div class="summary">
            合计: 
            <span class="highlight">
              <!-- <span v-show="orderData.payOfCurrencyCount">
                {{ `${orderData.payOfCurrencyCount}（积分），` }}
              </span>
              {{ setMoneyConfig(orderData.payOfMoney) }} -->
              {{ getPointsAndMoneyString(orderData) }}
            </span>
          </div>
        </div>
      </section>

      <section class="table-section">
        <div class="table-title">
          <div class="decorator" />
          基础信息
        </div>

        <div class="table-wrapper">
          <el-table :data="basicInfoTableData">
            <el-table-column
              prop="id"
              label="售后单号"
              width="80"
            />
            <el-table-column
              prop="orderId"
              label="订单号"
            >
              <tempalte>
                {{ orderData.orderNo }}
              </tempalte>
            </el-table-column>
            <el-table-column
              prop="userId"
              label="用户ID"
              width="180"
            />
            <el-table-column
              prop="unionId"
              label="客户唯一标识"
            >
              {{ orderData?.user?.unionId }}
            </el-table-column>
            <el-table-column
              prop="userPhone"
              label="联系手机号"
            />
            <el-table-column
              prop="userName"
              label="联系人"
            />
          </el-table>
        </div>
      </section>

      <section class="table-section">
        <div class="table-title">
          <div class="decorator" />
          退货申请信息
        </div>

        <div class="table-wrapper">
          <!--          <service-line label="售后单号">-->
          <!--            {{ orderData.exception?.orderId }}-->
          <!--          </service-line>-->
          <!--          <service-line label="申请状态">-->
          <!--            {{ getAbnormalOrderStatus(orderData.exception?.status) }}-->
          <!--          </service-line>-->
          <!--          <service-line label="订单编号">-->
          <!--            <div class="line-content">-->
          <!--              {{ orderData.orderNo }} <el-button-->
          <!--                type="primary"-->
          <!--                link-->
          <!--                @click="goOrderDetail(orderData.exception?.orderId)"-->
          <!--              >-->
          <!--                查看-->
          <!--              </el-button>-->
          <!--            </div>-->
          <!--          </service-line>-->
          <!--          <service-line label="申请时间">-->
          <!--            {{ formatTime(orderData.createTime) }}-->
          <!--          </service-line>-->
          <!--          <service-line label="用户账号">-->
          <!--            {{ orderData.exception?.userAccount }}-->
          <!--          </service-line>-->
          <!--          <service-line label="联系人">-->
          <!--            {{ orderData.exception?.userName }}-->
          <!--          </service-line>-->
          <!--          <service-line label="联系电话">-->
          <!--            {{ orderData.exception?.userPhone }}-->
          <!--          </service-line>-->
          <service-line label="退货原因">
            {{ orderData.exception?.userReason }}
          </service-line>
          <service-line label="问题描述">
            {{ orderData.exception?.userDescription }}
          </service-line>
          <service-line label="申请退款金额">
            <!-- <div class="line-content">
              <span v-show="orderData.payOfCurrencyCount">{{ `${orderData.payOfCurrencyCount}（积分），` }}</span>
              {{ setMoneyConfig(orderData.payOfMoney) }}
            </div> -->
            {{ getPointsAndMoneyString(orderData) }}
          </service-line>
          <service-line
            label="凭证照片"
            class="service-line"
          >
            <div
              v-for="(item, index) in orderData.exception?.userImages.split(',')"
              :key="index"
              class="displf"
            >
              <template v-if="item.substr(item.length - 4) == '.mp4'">
                <video
                  controls
                  :autoplay="false"
                  :src="item"
                  style="width: 200px;height=200px"
                />
              </template>

              <el-image
                v-else
                style="width: 200px; height: 200px"
                :src="item"
                fit="contain"
              />
            </div>
          </service-line>
        </div>
      </section>

      <!--      <section-->
      <!--        v-if="orderData.exception?.status !== 'reject'"-->
      <!--        class="table-section"-->
      <!--      >-->
      <!--        <div class="table-wrapper">-->
      <!--          <service-line label="订单金额">-->
      <!--            <span v-show="orderData.payOfCurrencyCount">{{ `${orderData.payOfCurrencyCount}（积分），` }}</span>-->
      <!--            {{ setMoneyConfig(orderData.payOfMoney) }}-->
      <!--          </service-line>-->
      <!--        </div>-->
      <!--      </section>-->

      <section
        v-if="orderData.exception?.status !== 'submit'"
        class="table-section"
      >
        <div class="table-wrapper">
          <service-line label="处理人员">
            {{ orderData.exception?.storeName }}
          </service-line>

          <service-line label="处理时间">
            {{ formatTime(orderData.exception?.storeProcessTime) }}
          </service-line>

          <service-line label="处理备注">
            {{ orderData.exception?.storeDescription }}
          </service-line>
        </div>
      </section>

      <section
        v-if="orderData.exception?.status == 'finish' || orderData.exception?.status == 'wait_store_receive'"
        class="table-section"
      >
        <div class="table-wrapper">
          <service-line label="退回快递公司">
            {{ orderData.exception?.userLogisticsCompany }}
          </service-line>

          <service-line label="退回快递单号">
            {{ orderData.exception?.userLogisticsNum }}
          </service-line>
        </div>
      </section>

      <!--      <section class="table-section">-->
      <!--        <div class="table-title">-->
      <!--          <div class="decorator" />-->
      <!--          审核留言-->
      <!--        </div>-->

      <!--        <div class="table-wrapper">-->
      <!--          <el-table :data="auditTableData">-->
      <!--            <el-table-column prop="" label=""></el-table-column>-->
      <!--            <el-table-column prop="" label=""></el-table-column>-->
      <!--            <el-table-column prop="" label=""></el-table-column>-->
      <!--          </el-table>-->
      <!--        </div>-->
      <!--      </section>-->
    </main-content>
  </div>
</template>

<script setup lang="ts">
import { Ref } from "vue";
import moment from "moment";
import { Warning } from "@element-plus/icons-vue";

import { setMoneyConfig } from "@/utils";
import { getAbnormalDetail } from "@/api/pointsMall";
import { AfterSalesServiceOrderStatus } from "@/config/dictionary";

import ServiceLine from "./components/ServiceLine.vue";
import { getPointsAndMoneyString } from "@/utils/index";


const Router = useRouter(),
  Route = useRoute();
const orderData = ref({} as any)

const goodsTableData = computed(() => {
  return [ orderData.value ]
})

const basicInfoTableData = computed(() => {
  return [ 
    {
      ...orderData.value?.exception ?? {},
      userId: orderData.value?.user?.id
    }
  ]
})

const auditTableData = computed(() => {
  return [ orderData.value ]
})

const formatTime = (val: string) => {
  if (val) {
    return moment(val).format("YYYY.MM.DD HH:mm:ss")
  }
  return '--'
}

const goOrderDetail = (id: any) => {
  Router.push({
    path: `/merchant/order/manage/detail`,
    query: {
      id: id
    }
  })
}

// 订单详情
const getAbnormalDetailData = async () => {
  let params = {
    id: Route.query.id,
  }
  let rs: any = await getAbnormalDetail(params)
  if (rs.code === 200) {
    orderData.value = rs.payload
  }

  getSteps()
}

const steps:Ref<{title: string, status: string[]}[]> = ref([])
const activeStepIndex:Ref<number> = ref(-1)
const getSteps = () => {
  const _steps = []

  _steps.push({
    title: '提交申请',
    status: [],
  })

  _steps.push({
    title: '商家审核',
    status: [ 'submit' ]
  })

  if (orderData.value?.exception?.status === 'wait_shangmen') {
    _steps.push({
      title: '上门取件',
      status: [ 'wait_shangmen' ]
    })
  } else {
    _steps.push({
      title: '买家寄回',
      status: [ 'wait_user_ship' ]
    })
  }

  _steps.push({
    title: '商家确认收货',
    status: [ 'wait_store_receive' ]
  })

  _steps.push({
    title: '退款完成',
    status: [ 'finish' ]
  })

  steps.value = [ ..._steps ]
  activeStepIndex.value = _steps.findIndex(item => item.status.includes(orderData.value?.exception?.status))
}

const currentOrderStatus = computed(() => {
  const statusList = [ ...steps.value ]
  statusList.push({
    title: '商家拒绝',
    status: [ 'reject' ]
  })

  return statusList.find(item => item.status.includes(orderData.value?.exception?.status))
})

// 返回订单状态
const getAbnormalOrderStatus = (_productType: string) => {
  return AfterSalesServiceOrderStatus.find(item => item.value == _productType)?.label ?? _productType
}

onBeforeMount(() => {
  getAbnormalDetailData()
})
</script>

<style scoped lang="scss">
.steps-line {
  padding: 20px;
  background: #F8F8F8;
}


.status-line {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;

  .left {
    display: flex;
    align-items: center;

    .status {
      margin-left: 10px;

      .status-main {
        font-size: 16px;
        line-height: 16px;
        display: flex;
        align-items: center;

        .icon {
          font-size: 18px;
          display: flex;
          align-items: center;
          color: var(--el-color-primary);
          margin-right: 10px;
        }
      }

      .status-sub {
        font-size: 14px;
        line-height: 14px;
        color: #999;
        margin-top: 10px;
        margin-left: 28px;
      }
    }
  }
}

.split-line__HZ {
  height: 1px;
  background-color: var(--el-table-border-color);
  margin: 20px 0;
}

.table-section {
  margin-top: 20px;

  .table-title {
    display: flex;
    align-items: center;

    .decorator {
      width: 4px;
      height: 16px;
      margin-right: 10px;
      background: #3E61A9;
    }
  }

  .table-wrapper {
    margin-top: 10px;
  }

  .button-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
}

.summary {
  // height: 0px;
  background-color: #F4F5F9;
  line-height: 50px;
  vertical-align: middle;
  text-align: right;
  padding: 5px 20px;
  color: #909399;

  .highlight {
    color: var(--el-color-danger);
    font-weight: bold;
  }
}

.line-content {
  display: flex;
  align-items: center;

  :deep(.el-button) {
    padding-top: 0;
    padding-bottom: 0;
    height: unset;
  }

  :deep(.el-input) {
    width: 400px;
    margin-right: 20px;
  }
}

.service-line {
  width: 100%;

  :deep(.line-content) {
    display: flex;

    :only-child {
      margin-right: 10px;
    }
  }
}

.abnormal-order {
  :deep(.content .content-slot-bg) {
    overflow: hidden;
  }
}</style>
